/* eslint-disable vue/order-in-components */
<template>
  <div class="app-container">
    <el-form ref="formData" :rules="rules" :model="formData" label-position="left" label-width="70px">
      <el-form-item v-show="false" label="ID">
        <el-input v-model="formData._id" disabled />
      </el-form-item>
      <el-form-item label="标题" prop="mulu">
        <el-input v-model="formData.mulu" />
      </el-form-item>
      <el-form-item label="序号">
        <el-input-number v-model="formData.xuhao" />
      </el-form-item>
      <el-form-item label="是否上架">
        <el-switch v-model="formData.isupper" active-color="#13ce66" inactive-color="#ff4949" />
      </el-form-item>
      <el-form-item label="所属诗集">
        <el-select v-model="formData.shijiIndex" placeholder="请选择">
          <el-option
            v-for="item in shiJiType"
            :key="item._id"
            :label="item.shiJiName"
            :value="item.index"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否音频">
        <el-switch v-model="formData.isad" active-color="#13ce66" inactive-color="#ff4949" />
      </el-form-item>
      <el-form-item label="音频">
        <audio controls :src="formData.dmtUrl.adUrl" stle="width:100%;max-width:600px;" />
      </el-form-item>
      <el-form-item label="上传音频">
        <file-heaper id="adFile" @fileheaperchange="handFileHeaperChange" />
      </el-form-item>
      <el-form-item label="是否歌谱">
        <el-switch v-model="formData.isopern" active-color="#13ce66" inactive-color="#ff4949" />
      </el-form-item>
      <el-form-item label="上传歌谱">
        <img-heper id="gepuFile" :src="formData.dmtUrl.gepuUrl" @imgheaperchange="handImgHeaperChange" @imgheaperclose="handImgHeaperClose" />
      </el-form-item>
      <el-form-item label="上传PPT图片">
        <img-heper id="pptFile" :src="formData.dmtUrl.pptUrl" @imgheaperchange="handPPtImgHeaperChange" @imgheaperclose="handPPtImgHeaperClose" />
      </el-form-item>
      <el-form-item label="歌词">
        <el-input v-model="formData.lyric" type="textarea" rows="10" />
      </el-form-item>
      <el-form-item>
        <el-button @click="$router.push('sgblist')">返回</el-button>
        <el-button type="primary" @click="updateData()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getShiJiType,
  updateSgbItem
} from '@/cloudbaseapi/cloudbase-sgbedit'
import { cloud_md5, loadingFull } from '@/cloudbaseapi/cloudbase-api'
import { Message } from 'element-ui'
import { getShiJiItem } from '@/cloudbaseapi/cloudbase-sgbedit'
import ImgHeper from '@/components/ImgHeper/index'
import FileHeaper from '@/components/FileHeaper/index'
export default {
  name: 'SgbDatil',
  components: { ImgHeper, FileHeaper },
  // eslint-disable-next-line vue/require-prop-types
  props: ['isEdit'],
  data() {
    return {
      formData: {
        _id: 0,
        mulu: '',
        xuhao: false,
        isad: false,
        isopern: false,
        lyric: '',
        shijiIndex: 0,
        isupper: false,
        dmtUrl: {
          adUrl: '',
          gepuUrl: '',
          pptUrl: ''
        }
      },
      dmtUrl: {
        adurl: '',
        imgurl: ''
      },
      shiJiType: [],
      rules: {
        mulu: [{ required: true, message: '请输入标题', trigger: 'blur' }]
      }
    }
  },
  async activated() {
    await this.init()
  },
  methods: {
    async init() {
      const load = loadingFull()
      await this.getSgbItemPagePage()
      if (this.isEdit) {
        const id = this.$route.query.id
        const data = await getShiJiItem(id)
        this.formData = data.data[0]
      } else {
        this.formData._id = cloud_md5(Date.now())
      }
      setTimeout(() => {
        load.close()
      }, 500)
    },
    updateData() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          const load = loadingFull()
          updateSgbItem(this.formData, this.isEdit ? 'edit' : 'create').then(res => {
            setTimeout(() => {
              load.close()
            }, 500)
            Message({
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
          }).catch(err => {
            setTimeout(() => {
              load.close()
            }, 500)
            console.log(err)
            Message({
              message: '保存失败',
              type: 'error',
              duration: 2000
            })
          })
        } else {
          Message({
            message: '表单填写不规范请按要求填',
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    async getSgbItemPagePage() {
      const data = await getShiJiType()
      this.shiJiType = data.data
    },
    handImgHeaperChange(val) {
      this.formData.dmtUrl.gepuUrl = val
    },
    handImgHeaperClose() {
      this.formData.dmtUrl.gepuUrl = ''
    },
    handPPtImgHeaperChange(val) {
      this.formData.dmtUrl.pptUrl = val
    },
    handPPtImgHeaperClose() {
      this.formData.dmtUrl.pptUrl = ''
    },
    handFileHeaperChange(val) {
      this.formData.dmtUrl.adUrl = val
    }
  }
}
</script>

<style scoped>

</style>
